<template>
  <section class="error-404">
    <img class="error-img" src="../../assets/imgs/404.webp"/>
    <div class="txt-404">
      <p class="txt-t">404: Page Not Found</p>
      <p class="txt-ts">你的页面不见了。噗。一切都过去了。请查看以下链接以获得更多帮助。</p>
      <div class="err-btn">
        <div class="btn-item" @click="$router.replace({ path: '/' })">🏃 Home</div>
        <div class="btn-item"><a href="https://gitee.com/Z568_568">🌍 Gitee</a></div>
        <div class="btn-item"><a href="http://www.zhouyi.run/#/">🌍 个人主页</a></div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "index",
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.error-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;

  .txt-404 {
    .txt-t {
      font-size: 30px;
      color: $color-primary;
    }

    .err-btn {
      display: flex;

      .btn-item {
        margin-right: 20px;
        cursor: pointer;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }
}
</style>
